<template>
    <div>
        <div class="card">
            <div class="card-content">
                <div class="card-item" v-for="(item,index) in json" :key="index" @click="fn_click(item)">
                    <div class="imgbox">
                        <img :src=item.img alt="">
                    </div>
                    <div class="info">
                        <div class="info-title">{{item.title}}</div>
                        <div class="info-content">
                            <div class="left">
                                <van-tag color="#ee0a24" plain>普通</van-tag>
                                <span class="tag">专辑唱片</span>
                            </div>
                            <div class="right">{{item.ranArr[0]}}%</div>
                        </div>
                        <van-progress pivot-text="" color="#ee0a24" :percentage=item.ranArr[0] />
                        <div class="info-count">
                            <div class="left"><span>￥{{item.ranArr[3]}}</span> 已筹</div>
                            <div class="middle"><span>{{item.ranArr[1]}}</span> 支持</div>
                            <div class="right"><span>{{item.ranArr[2]}}</span> 剩余</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name : "cfcard",
    props: ['json'],
    data() {
        return {
        };
    },
    computed: {

    },
    created() {
        // console.log(this)
    },
    mounted() {

    },
    watch: {

    },
    methods: {
        fn_click(itemjson){
            if(this.$route.name == 'cFunding'){
                this.$router.replace({
                    name : 'cFunDetails',
                    params : {
                        json : itemjson
                    } 
                })
            }
        }
    },
    components: {

    },
};
</script>

<style scoped lang="less">
.card{
    width: 100%;
    height: auto;
    .card-content{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction:column;
        justify-content: center;
        align-items: center;
        
        .card-item{
            width: 100%;
            height: auto;
            .imgbox{
                width: 100%;
                height: 4.8rem;
                display: inline-block;
                overflow: hidden;
                position: relative;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .info{
                width: 100%;
                height: auto;
                padding: .4rem;
                box-sizing: border-box;
                .info-content{
                    width: 100%;
                    height: auto;
                    display: flex;
                    justify-content: space-between;
                    box-sizing: border-box;
                    margin-top: 10px;
                    >div{
                        flex:1;
                    }
                    >div:nth-child(1){
                        .van-tag{
                            border-radius: 3px;
                            margin-right: 10px;
                        }
                        .tag{
                            font-size: 12px;
                            color: #999;
                        }
                    }
                    >div:nth-child(2){
                        text-align: right;
                        font-size: 12px;
                        color: #eb484a;
                    }
                }
                .van-progress{
                    margin: 17px 0 15px 0;
                }
                .info-count{
                    width: 100%;
                    height: auto;
                    display: flex;
                    justify-content: space-between;
                    div{
                        font-size: 11px;
                        color: #bbb;
                        flex:1;
                        span{
                            display: inline-block;
                            color:#000;
                            font-size: 16px;
                        }
                    }
                    div:nth-child(2){
                        text-align: center;
                    }
                    div:nth-child(3){
                        text-align: end;
                    }
                }
            
            
            }
        }
    }
}
</style>
